{% load staticfiles %}
{% load widget_tweaks %}
<!DOCTYPE html>
<html lang="en" class="app">
<head>  
  <meta charset="utf-8" />
  <title>Aurora | 原创音乐者交流平台</title>
  <meta name="description" content="app, web app, responsive, admin dashboard, admin, flat, flat ui, ui kit, off screen nav" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <link rel="stylesheet" href="{% static 'js/jPlayer/jplayer.flat.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/animate.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/font-awesome.min.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/simple-line-icons.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/font.css' %}" type="text/css" />
  <link rel="stylesheet" href="{% static 'css/app.css' %}" type="text/css" />
    <!--[if lt IE 9]>
    <script src="js/ie/html5shiv.js"></script>
    <script src="js/ie/respond.min.js"></script>
    <script src="js/ie/excanvas.js"></script>
  <![endif]-->
</head>
<body class="bg-info dker" style="overflow-y: auto">
  <section id="content" class="m-t-lg wrapper-md animated fadeInDown">
    <div class="container aside-xl">
      <a class="navbar-brand block" href="{% url 'music:index' %}"><span class="h1 font-bold">Aurora</span></a>
      <section class="m-b-lg">
        <header class="wrapper text-center">
          <strong>登录畅游音乐海洋</strong>
        </header>
        <form action="{% url 'user:register' %}" method="post">
            {% csrf_token %}
            {{ form.username |attr:"placeholder:昵称" | add_class:'form-group form-control rounded input-lg text-center no-border'}}
            {{ form.pwd |attr:"placeholder:密码" | add_class:'form-group form-control rounded input-lg text-center no-border'}}
            {{ form.pwd_again |attr:"placeholder:确认密码" | add_class:'form-group form-control rounded input-lg text-center no-border'}}
            {{ form.sex |attr:"placeholder:性别" | add_class:'form-group form-control rounded input-lg text-center no-border'}}
            {{ form.age |attr:"placeholder:年龄" | add_class:'form-group form-control rounded input-lg text-center no-border'}}
            {{ form.phone_number |attr:"placeholder:联系电话" | add_class:'form-group form-control rounded input-lg text-center no-border'}}
            {{ form.email |attr:"placeholder:电子邮箱" | add_class:'form-group form-control rounded input-lg text-center no-border'}}
            {{ error }}
{#          <input type="hidden" name="next" value="{{ next }}"/>#}
          <div class="checkbox i-checks m-b">
            <label class="m-l">
              <input type="checkbox" checked=""><i></i> 我同意 <a href="#">用户许可协议</a>
            </label>
          </div>
          <button type="submit" class="btn btn-lg btn-warning lt b-white b-2x btn-block btn-rounded"><i class="icon-arrow-right pull-right"></i><span class="m-r-n-lg">注册</span></button>
          <div class="line line-dashed"></div>
          <p class="text-muted text-center"><small>已经有账户?立即登录</small></p>
          <a href="{% url 'user:user_login' %}" class="btn btn-lg btn-info btn-block btn-rounded">登录</a>

        </form>

      </section>
    </div>
  </section>
  <!-- footer -->
  <footer id="footer">
    <div class="text-center padder clearfix">
      <p>
        <small>Aurora原创音乐者交流平台<br>&copy; 2019</small>
      </p>
    </div>
  </footer>
  <!-- / footer -->
  <script src="{% static 'js/jquery.min.js' %}"></script>
  <!-- Bootstrap -->
  <script src="{% static 'js/bootstrap.js' %}"></script>
  <!-- App -->
  <script src="{% static 'js/app.js' %}"></script>
  <script src="{% static 'js/slimscroll/jquery.slimscroll.min.js' %}"></script>
  <script src="{% static 'js/app.plugin.js' %}"></script>
</body>
</html>